<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <link rel="stylesheet" href="my.css" />
        <style>
            /* App custom styles */
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
        </script>
        <script type="text/javascript" src="js/jquery.ui.map.js"></script>
        <script type="text/javascript" src="my.js">
        </script>
        <script>
            var myLatlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
              zoom: 8,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);
        </script>
    </head>
    <body>
		<!-- Pagina de inicio -->
        <div data-role="page" id="paginaPrincipal">
            <div data-theme="a" data-role="header">
                <h3>
                    InfoBus
                </h3>
            </div>
            <div data-role="content" style="padding: 15px">
                <div style=" text-align:center">
                    <img style="width: 243px; height: 120px" src="res/logo.png" />
                </div>
                <h5 style="text-align:center">
                    Bienvenido a InfoBus - Seguimiento de colectivos
                </h5>
                <h5 style="text-align:center">
                    Para consultar tiempos de llegada de colectivos y recorridos de los mismos hacer click en el boton correspondiente de abajo
                </h5>
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#recorridos" data-theme="e" data-icon="star">
                                Recorridos
                            </a>
                        </li>
                        <li>
                            <a href="#tiemposDeEspera" data-theme="e" data-icon="info">
                                Tiempos de espera
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    www.infobus.netai.net
                </h3>
            </div>
        </div>
        
		<!-- Seccion de recorridos - Aqui se visualizarán los colectivos
			en un mapa carretero
		-->
        <div data-role = "page" id = "recorridos">
            <div data-theme="a" data-role="header">
                <h3>
                    InfoBus - Maps
                </h3>
            </div>
            <div data-role="content" style="padding: 15px">
                    <div data-role="content" style="padding: 20px">
                        <div id="map_canvas" style="height: 350px; position: relative">

                        </div>
                        <div style="text-align:center">
                        <a href="#paginaPrincipal" data-transition="fade">Atras</a>
                        </div>
                    </div>
            </div>
            <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                www.infobus.netai.net
            </h3>
            </div>
        </div>
		
		<!-- Seccion para consultar tiempos de espera aproximados de los 
			 colectivos y además horarios de cada colectivos por defecto
		-->
		<div data-role = "page" id = "tiemposDeEspera">
			<div data-theme="a" data-role="header">
                <h3>
                    InfoBus - Tiempos de espera
                </h3>
            </div>
			<div data-role="fieldcontain">
				<label for="selectmenu1">
					Linea:
				</label>
				<select data-native-menu="false" name="selectmenu1" id="selectmenu1" data-theme="e" data-mini="true">
					<option value="linea1">
						Linea 1
					</option>
					<option value="linea2">
						Linea 2
					</option>
					<option value="linea3">
						Linea 3
					</option>
				</select>
			</div>
			<div data-role="fieldcontain">
				<label for="selectmenu2">
					Parada:
				</label>
				<select data-native-menu="false" name="selectmenu2" id="selectmenu2" data-theme="e" data-mini="true">
					<option value="parada1">
						Parada 1
					</option>
					<option value="parada2">
						Parada2
					</option>
				</select>
			</div>
            <div data-role="content" style="padding: 15px">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#page1" data-theme="e" data-icon="info">
                                Ver horarios
                            </a>
                        </li>
                        <li>
                            <a href="#page1" data-theme="e" data-icon="info">
                                Tiempo de espera
                            </a>
                        </li>
                    </ul>
                </div>
				<div data-role="content" style="padding: 20px">
					<div style="text-align:center">
					<a href="#paginaPrincipal" data-transition="fade">Atras</a>
					</div>
				</div>
			</div>
			<div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    www.infobus.netai.net
                </h3>
            </div>
		</div>
		<script>
            //App custom javascript
        </script>
    </body>
</html>